/* stylelint-disable declaration-empty-line-before */
/* stylelint-disable order/properties-order */
/* stylelint-disable selector-class-pattern */
$panel-field: (
  'icon-margin': 6px,
);

// 三块定义该变量的地方，要改的话一起改！
// form-item, panel-field, grid-edit-item
$form-item: (
  'label-color': getCssVar(color, text, 1),
  'text-color': getCssVar(color, text, 2),
  'hover-color': getCssVar(color, text, 0),
  'hover-bg-color': getCssVar(color, fill, 1),
  'readonly-color': getCssVar(color, disabled, text),
  'border-color': transparent,
  'font-size': getCssVar(font-size, regular),
  'placeholder-color': getCssVar(color, text, 3),
  'disabled-color': getCssVar(color, disabled, text),
  'disabled-bg-color': getCssVar(color, disabled, fill),
  'disabled-border-color': getCssVar(color, disabled, border),
  'active-bg': getCssVar(color, fill, 2),
  'active-border': getCssVar(active, bg),
  'focus-bg': getCssVar(color, fill, 0),
  'focus-border': getCssVar(color, focus, border),
  'line-height': getCssVar(editor, default, line-height),
  'font-weight': getCssVar(font-weight, regular),
);

@include b(panel-field) {
  @include set-component-css-var('form-item', $form-item);
  width: 100%;
  height: 100%;
  position: relative;

  @include e(error) {
    left: 0;
    top: 100%;
    line-height: 1;
    font-size: getCssVar('font-size', 'small');
    padding-top: getCssVar('spacing', 'super-tight');
    position: absolute;
    color: var(--ibiz-color-danger);
  }

  @include when(error) {
    .el-input__wrapper {
      box-shadow: 0 0 0 1px var(--ibiz-color-danger) inset;
    }
  }

  @include b(panel-field-content) {
    line-height: inherit;
  }
}
